<template>
    <div>
        <div class="order-info">
            <h3>订单商品</h3>
            <table class="goods-table">
              <thead>
                <tr>
                  <th width="400">商品信息</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th>实付</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="i in 3" :key="i">
                  <td>
                    <a href="javascript:;" class="product">
                      <img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png" alt="" />
                      <div class="info">
                        <p class="name ellipsis">小米电视4A 32英寸</p>
                        <p class="attrs ellipsis">颜色：黑色 尺寸:32寸</p>
                      </div>
                    </a>
                  </td>
                  <td>¥1899</td>
                  <td>1</td>
                  <td>¥1899</td>
                  <td>¥1899</td>
                </tr>
              </tbody>
            </table>
            <h3>收货信息</h3>
            <div class="info-box">
              <dl>
                <dt>收<i></i>货<i></i>人：</dt>
                <dd>周杰伦</dd>
              </dl>
              <dl>
                <dt>联系方式：</dt>
                <dd>180****1849</dd>
              </dl>
              <dl>
                <dt>收货地址：</dt>
                <dd>北京海淀区黄平路金燕龙</dd>
              </dl>
            </div>
            <h3>支付方式及送货时间</h3>
            <div class="info-box">
              <dl>
                <dt>支付方式：</dt>
                <dd>180****1849</dd>
              </dl>
              <dl>
                <dt>送货时间：</dt>
                <dd>双休日、假日送货(适合于家庭地址)</dd>
              </dl>
            </div>
            <h3>发票信息</h3>
            <div class="info-box">
              <dl>
                <dt>发票类型：</dt>
                <dd>电子发票</dd>
              </dl>
              <dl>
                <dt>发票内容：</dt>
                <dd>日用品</dd>
              </dl>
              <dl>
                <dt>发票抬头：</dt>
                <dd>个人</dd>
              </dl>
            </div>
            <h3>订单信息</h3>
            <div class="info-box">
              <dl>
                <dt>订单编号：</dt>
                <dd>在线支付</dd>
              </dl>
              <dl>
                <dt>下单时间：</dt>
                <dd>2018-01-06 17:09:35</dd>
              </dl>
            </div>
            <div class="sum-info">
              <div class="info">
                <div class="item">
                  <label>商品件数：</label>
                  <span>5件</span>
                </div>
                <div class="item">
                  <label>商品总价：</label>
                  <span>¥5697</span>
                </div>
                <div class="item">
                  <label>运<i></i>费：</label>
                  <span>0</span>
                </div>
                <div class="item">
                  <label>应付总额：</label>
                  <span class="price">¥5697</span>
                </div>
              </div>
            </div>
          </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
div,p,ul,ol,li,dl,dt,dd,form,table,h1,h2,h3,h4,h5,h6,input,select,textarea,span,strong,em,b,i,u,a,img,*{padding:0;margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
body { font-family: '黑体'; font-size: 12px;  color: #000; background-color: #fff; }
ul,ol,li { list-style: none; }
h1,h2,h3,h4,h5,h6{ font-size: 14px;}
a img{ border: none;}
img,input,textarea,select,option,output,span,a,b,em,i,strong,u,s,button,label{ vertical-align:middle;}
table{border-collapse:collapse;}
a { background: transparent; text-decoration: none; color: #333; }
a:hover{  color: #f90; }
.clear{ clear:both; height: 0; width: 0; overflow: hidden;}
body,html{height: 100%;width: 100%;}
.order-info {
    padding: 0 50px;
    h3 {
      font-weight: normal;
      font-size: 16px;
      padding: 25px 5px;
    }
  }
  .goods-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    th {
      font-weight: normal;
      line-height: 60px;
      background: #f5f5f5;
      &:first-child {
        text-align: left;
        padding-left: 20px;
      }
    }
    td {
      border-bottom: 1px solid #f5f5f5;
      text-align: center;
      &:first-child {
        padding-left: 20px;
        border-left: 1px solid #f5f5f5;
      }
      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
    .product {
      display: flex;
      padding: 20px 0;
      img {
        width: 70px;
        height: 70px;
        border: 1px solid #f5f5f5;
      }
      .info {
        align-self: center;
        padding-left: 20px;
        text-align: left;
        p {
          margin-bottom: 5px;
          width: 280px;
        }
        .attrs {
          color: #999;
        }
      }
    }
  }
  .info-box {
    border:1px solid #f5f5f5;
    padding: 20px;
    dl {
      display: flex;
      line-height: 30px;
      dt {
        width: 80px;
        color: #999;
        font-size: 14px;
        i {
          display: inline-block;
          width: 0.5em;
        }
      }
      dd {
        flex: 1;
      }
    }
  }
  .sum-info {
    padding: 30px 30px 100px 30px;
    overflow: hidden;
    .info {
      width: 250px;
      height: 160px;
      float: right;
      font-size: 16px;
      .item {
        line-height: 40px;
        display: flex;
        label {
          width: 90px;
          i {
            display: inline-block;
            width: 2em;
          }
        }
        span {
          flex: 1;
          text-align: right;
          padding-right: 30px;
          &.price {
            font-size: 20px;
            color: #cf4444;
            ;
          }
        }
      }
    }
  }
</style>